<template>
 <ToDoHeader  @addTodo="addTodo"/>
 <ToDoMain :list="showList"  @delToDo="delToDo"/>
 <ToDoFooter  :lastLength="lastLength"  @updateStatus="updateStatus"/>
</template>

<script setup>
import ToDoFooter from './components/ToDoFooter.vue';
import ToDoHeader from './components/ToDoHeader.vue';
import ToDoMain from './components/ToDoMain.vue';
import { ref } from 'vue'
import { ref, computed } from 'vue'
 const list = ref([
 { id: 1, name: '晨练', done: false, },
 { id: 2, name: '练书法', done: true, },
 ])
 const addTodo = name => {
 list.value.push({ name, done: false, id: ~~(Math.random() * 1000) })
 }
 const delToDo = id => {
 list.value = list.value.filter(item => item.id !== id)
 }
 
 const lastLength = computed(() => {
 return list.value.filter(item => !item.done).length
 })
 const status = ref('all')
 const showList = computed(() => {
 if (status.value === 'all') {
 return list.value
 }
 if (status.value === 'active') {
 return list.value.filter(item => !item.done)
 }
 if (status.value === 'completed') {
 return list.value.filter(item => item.done)
 }
 })
 const emit = defineEmits(['updateStatus'])
 const props = defineProps(['lastLength'])
 const updateStatus = status => {
     status.value = status
 }
</script>

<style  scoped>

</style>